<template>
  <div class="donation">
    <div class="select">
      查询:
      <select name="" id="" v-model="find">
        <option value="">----请选择----</option>
        <option :value="i" v-for="i in unit">{{ i }}</option>
      </select>
    </div>
    <div class="addition">
      <a>捐赠人：</a>
      <input type="text" v-model="name" />
      <a>受捐赠单位：</a>
      <select name="" id="" v-model="un">
        <option value="">----请选择----</option>
        <option :value="i" v-for="i in unit">{{ i }}</option>
      </select>
      <a>金额</a>
      <input type="text" name="" id="" v-model="monery" />
      <a>受捐赠日期：</a>
      <input type="text" v-model="time" />
      <button @click="add(data.length, name, time, un, monery)">新增</button>
    </div>
    <table class="sheet" border>
      <thead>
        <tr>
          <th>序列</th>
          <th>捐赠人</th>
          <th>受捐单位</th>
          <th>金额</th>
          <th>受捐日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td v-if="!item.editing">{{ item.name }}</td>
          <td v-else>
            <input type="text" v-model="item.newName" />
          </td>
          <td v-if="!item.editing">{{ item.unit }}</td>
          <td v-else>
            <select v-model="item.newUnit">
              <option value="">----请选择----</option>
              <option :value="i" v-for="i in unit">{{ i }}</option>
            </select>
          </td>
          <td v-if="!item.editing">{{ item.amount }}</td>
          <td v-else>
            <input type="text" v-model="item.newAmount" />
          </td>
          <td v-if="!item.editing">{{ item.time }}</td>
          <td v-else>
            <input type="text" v-model="item.newTime" />
          </td>
          <td>
            <button @click="up(item, index)" v-if="!item.editing">修改</button>
            <button v-if="item.editing" @click="ok(item, index)">确定</button>
            <button @click="del(item)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useCounterStore } from "../store/data";
// 渲染
// 查找
const find = ref();
const store = useCounterStore();
const unit = computed(() => store.unit);
const data = computed(() => {
  if (!find.value) {
    return store.data;
  }
  return store.data.filter((item) => {
    return item.unit.toLowerCase().includes(find.value.toLowerCase());
  });
});

// 删除
const del = (item) => {
  const index = store.data.findIndex((i) => i.id === item.id);
  if (index !== -1) {
    store.data.splice(index, 1);
  }
};

// 获取输入的数据
const name = ref("");
const time = ref("");
const un = ref();
const monery = ref();

// 添加
const add = (id, name, time, un, monery) => {
  if (name == "" || time == "" || un == "" || monery === "") {
    return alert("请输入数据");
  }
  id = store.data.length;
  store.add(id, name, time, un, monery);
};

// 修改按钮
const up = (item) => {
  item.editing = true;
  item.newName = item.name;
  item.newUnit = item.unit;
  item.newAmount = item.amount;
  item.newTime = item.time;
};

// 确认按钮
const ok = (item) => {
  item.name = item.newName;
  item.unit = item.newUnit;
  item.amount = item.newAmount;
  item.time = item.newTime;
  item.editing = false;
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.donation {
  border: solid 2px rgba(4, 0, 39, 0.176);
  width: 100%;
  padding-bottom: 20px;
  background-color: rgba(241, 241, 241, 0.436);
  display: flex;
  flex-direction: column;
  .select {
    line-height: 50px;
    height: 50px;
    border-bottom: 2px solid #cccccc49;
  }
  .addition {
    flex: 0 1;
    height: 50px;
    border-bottom: 2px solid #cccccc41;
    line-height: 50px;
  }
  .sheet {
    margin-top: 10px;
    text-align: center;
    border-collapse: collapse;
    color: #7c7c7c;
  }
}
</style>
